function initStage() {

    client.stage = new Kinetic.Stage({
        container: "container",
        width: document.documentElement.clientWidth, //创建的舞台宽度
        height: document.documentElement.clientHeight //创建的舞台高度,

    });

    client.rect_layer = new Kinetic.Layer();
    client.mark_layer = new Kinetic.Layer();

}

function initData() {
    client.center = {
        id: client.center_data.id,
        x: client.stage.width() / 2 - client.center_data.width / 2,
        y: client.stage.height() / 2 - client.center_data.height / 2,
        width: client.center_data.width,
        height: client.center_data.height,
        fill: client.center_data.fill
    };

    client.left_side = {
        id: "left_" + client.side_data.id,
        x: client.center.x - client.side_data.width,
        y: client.center.y,
        width: client.side_data.width,
        height: client.center.height,
        fill: client.side_data.fill
    };

    client.right_side = {
        id: "right_" + client.side_data.id,
        x: client.center.x + client.center.width,
        y: client.center.y,
        width: client.side_data.width,
        height: client.center.height,
        fill: client.side_data.fill
    };

    client.head = {
        id: client.head_data.id,
        x: client.left_side.x,
        y: client.center.y - client.head_data.height,
        width: client.center.width + client.left_side.width * 2,
        height: client.head_data.height,
        fill: client.head_data.fill
    };

    client.foot = {
        id: client.foot_data.id,
        x: client.head.x,
        y: client.center.y + client.center.height,
        width: client.head.width,
        height: client.foot_data.height,
        fill: client.foot_data.fill
    };
    config.IS_MARK = 1;
    config.CURRENT_UNIT = 0;
}


function addAllRect() {
    var rect_data_array = [client.center, client.head, client.foot, client.left_side, client.right_side];
    for (var i = 0; i < rect_data_array.length; i++) {
        client.rect_layer.add(new Kinetic.Rect({
            id: rect_data_array[i].id,
            x: rect_data_array[i].x,
            y: rect_data_array[i].y,
            width: rect_data_array[i].width,
            height: rect_data_array[i].height,
            fill: rect_data_array[i].fill
        }));
    }

    client.stage.add(client.rect_layer);
}

function addMark() {
    // 头部宽
    var mark_data_arrays = [
        {
            x1: client.head.x, y1: client.head.y - 10,
            x2: client.right_side.x + client.right_side.width, y2: client.head.y - 10
        },
        {
            x1: client.head.x, y1: client.head.y - 15,
            x2: client.head.x, y2: client.head.y - 5
        },
        {
            x1: client.right_side.x + client.right_side.width, y1: client.head.y - 15,
            x2: client.right_side.x + client.right_side.width, y2: client.head.y - 5
        },
        // 边的宽
        {
            x1: client.foot.x, y1: client.foot.y + client.foot.height + 10,
            x2: client.left_side.x + client.left_side.width, y2: client.foot.y + client.foot.height + 10
        },
        {
            x1: client.foot.x, y1: client.foot.y + client.foot.height + 5,
            x2: client.foot.x, y2: client.foot.y + client.foot.height + 15
        },
        {
            x1: client.left_side.x + client.left_side.width, y1: client.foot.y + client.foot.height + 5,
            x2: client.left_side.x + client.left_side.width, y2: client.foot.y + client.foot.height + 15
        },
        // 中央的宽
        {
            x1: client.center.x, y1: client.foot.y + client.foot.height + 10,
            x2: client.right_side.x, y2: client.foot.y + client.foot.height + 10
        },
        {
            x1: client.left_side.x + client.left_side.width, y1: client.foot.y + client.foot.height + 5,
            x2: client.left_side.x + client.left_side.width, y2: client.foot.y + client.foot.height + 15
        },
        {
            x1: client.right_side.x, y1: client.foot.y + client.foot.height + 5,
            x2: client.right_side.x, y2: client.foot.y + client.foot.height + 15
        },
        // 边的高
        {
            x1: client.left_side.x - 10, y1: client.left_side.y,
            x2: client.left_side.x - 10, y2: client.left_side.y + client.left_side.height
        },
        {
            x1: client.left_side.x - 15, y1: client.left_side.y,
            x2: client.left_side.x - 5, y2: client.left_side.y
        },
        {
            x1: client.left_side.x - 15, y1: client.left_side.y + client.left_side.height,
            x2: client.left_side.x - 5, y2: client.left_side.y + client.left_side.height
        },
        // 天的高
        {
            x1: client.head.x - 10, y1: client.head.y,
            x2: client.head.x - 10, y2: client.head.y + client.head.height
        },
        {
            x1: client.head.x - 15, y1: client.head.y,
            x2: client.head.x - 5, y2: client.head.y
        },
        {
            x1: client.head.x - 15, y1: client.head.y + client.head.height,
            x2: client.head.x - 5, y2: client.head.y + +client.head.height
        },
        // 地的高
        {
            x1: client.foot.x - 10, y1: client.foot.y,
            x2: client.foot.x - 10, y2: client.foot.y + +client.foot.height
        },
        {
            x1: client.foot.x - 15, y1: client.foot.y,
            x2: client.foot.x - 5, y2: client.foot.y
        },
        {
            x1: client.foot.x - 15, y1: client.foot.y + client.foot.height,
            x2: client.foot.x - 5, y2: client.foot.y + client.foot.height
        }

    ];

    for (var i = 0; i < mark_data_arrays.length; i++) {
        client.mark_layer.add(new Kinetic.Line({
            points: [mark_data_arrays[i].x1, mark_data_arrays[i].y1,
                mark_data_arrays[i].x2, mark_data_arrays[i].y2],
            stroke: "black"
        }));
    }

    // add num text
    var num_data_arrays = [
        {
            x: client.head.x + client.head.width / 2 - 10,
            y: client.head.y - 25,
            text: getNum(changeUnit(client.head.width))
        },
        {
            x: client.left_side.x + client.left_side.width / 2 - 10,
            y: client.foot.y + client.foot.height + 15,
            text: getNum(changeUnit(client.left_side.width))
        },
        {
            x: client.center.x + client.center.width / 2 - 10,
            y: client.foot.y + client.foot.height + 15,
            text: getNum(changeUnit(client.center.width))
        },
        {
            x: client.head.x - 35,
            y: client.head.y + client.head.height / 2,
            text: getNum(changeUnit(client.head.height))
        },
        {
            x: client.foot.x - 35,
            y: client.foot.y + client.foot.height / 2,
            text: getNum(changeUnit(client.foot.height))
        },
        {
            x: client.left_side.x - 35,
            y: client.left_side.y + client.left_side.height / 2,
            text: getNum(changeUnit(client.left_side.height))
        }
    ];

    for (var i = 0; i < num_data_arrays.length; i++) {
        client.mark_layer.add(new Kinetic.Text({
            x: num_data_arrays[i].x,
            y: num_data_arrays[i].y,
            text: num_data_arrays[i].text,
            fill: "green"
        }));
    }

    client.stage.add(client.mark_layer);

}